<template>
  <div>
  	<top-bar title="持仓统计" titleShow="true" backShow="true">
      <div class="toggle gfc-grey1" slot="r-btn">更换账户</div>
    </top-bar>
  	<div class="content statistic con-bg">
      <div class="list-box">
        <ul class="items-aro">
          <li class="flex-1">资产总值<br><i class="gfc-yellow number">$157183.60</i></li>
          <li class="flex-1">今日盈亏<br><i class="gfc-green number">$157183</i></li>
        </ul>
      </div>
      <div class="list-box">
        <ul class="items-aro">
          <li class="flex-1">已用保证金<br><i class="gfc-grey2 number">$157183.60</i></li>
          <li class="flex-1">余额<br><i class="gfc-grey2 number">$157183</i></li>
          <li class="flex-1">保证金比例<br><i class="gfc-grey2 number">27%</i></li>
        </ul>
        <ul class="items-aro">
          <li class="flex-1">持仓笔数<br><i class="gfc-grey2 number">10</i></li>
          <li class="flex-1">浮动盈亏<br><i class="gfc-green number">$15.3</i></li>
          <li class="flex-1">浮动盈亏比<br><i class="gfc-grey2 number">5%</i></li>
        </ul>
      </div>
  	</div>
  </div>
</template>

<script>
  import topBar from '../../components/topBar/topBar.vue'
  export default {
    data() {
      return {
        positionShow: true,	//持仓
        pendingShow: false,	//挂单
        historyShow: false,	//历史
        orderOpen: false,	//订单详情
        profitOpen: false 	//收益详情
      }
    },
    components: {
      topBar
    },
    methods: {

    },

  }
</script>
<style scoped>
  .top-bar .toggle {
    position: absolute;
    top: 0;
    right: .18rem;
    font-size: .18rem;
    height: .44rem;
    line-height: .44rem;
  }
.statistic {
  color: #6A747F;
  font-size: .16rem;
  background: #22272D;
}
.number {
  font-size: .20rem;
  padding-top: .18rem;
  display: inline-block;
}
.list-box {
  overflow: hidden;
  text-align: center;
  margin-bottom: .1rem;
  background: #282f37;
}
.list-box ul {
  border-bottom: .01rem solid #6A747F;
  padding: .2rem 0;
}
.list-box ul:last-child {
  border: none;
}
.list-box li {
  flex: 1;
  border-right: .01rem solid #6A747F;
}
.list-box li:last-child {
  border: none;
}
</style>
